<template>
  <div class="has-bottom ">
    <div ref="info">
      <!-- 商品头部 -->
      <productHead :list="Data.imgList" :imgUrl="ThumbnailUrl410" :video-url="VideoUrl" :scroll-top="scrollTop" @changeDetail="changeDetail" @clickLeft="clickLeft" />

      <!-- 商品简介 -->
      <productIntro :data="Data" @changeFavState="changeFavState" @share="share" />

      <!-- 商品标签 -->
      <productTag v-show="ProductInfo&&ProductInfo.TagsList&&ProductInfo.TagsList.length>0" :tag-list="ProductInfo.TagsList" />

      <!-- 运费 -->
      <productFreight :data="Data" />

      <!-- 促销、配送 -->
      <div v-show="Data.PolicyList&&Data.PolicyList.length>0" class="product-option mt-10">
        <productOption v-if="Data.PolicyList&&Data.PolicyList.length>0" opt-type="sales" :policy-list="Data.PolicyList" />
      <!-- <productOption opt-type="post" :product="ProductInfo" :address="UserAddress" @changeAddress="changeAddress" /> -->
      </div>

      <!--参数、规格 -->
      <div v-show="(ProductInfo.ProductAttributesList&&ProductInfo.ProductAttributesList.length>0)||ProductInfo.ParamerValue" class="product-option mt-10">
        <productOption v-if="ProductInfo.ProductAttributesList&&ProductInfo.ProductAttributesList.length>0" opt-type="attr" :attr-list="ProductInfo.ProductAttributesList" :product="ProductInfo" @showOpt="showSpec" />
        <productOption v-if="ProductInfo.ParamerValue" opt-type="param" :product="ProductInfo" />
      </div>

      <!-- 评价模块 -->
      <productEvaluate :data="evaluateData" :product-id="ProductID" />
    </div>
    <!-- 详情模块 -->
    <div class="product-detail mt-10">
      <p class="product-detail-tle fw-b">商品详情</p>
      <div v-show="ProductInfo.Description" class="pt-15" v-html="ProductInfo.Description" />
    </div>

    <!-- 底部栏 -->
    <shopCart car-type="productDetail" :car-list="carList" :shop-data="ProductInfo" :tel="tel" @updateCart="updateCart" @showSpec="showSpec" />

    <!-- 规格弹窗 -->
    <van-popup v-model="popupData.show" position="bottom" class="bottom-popup">
      <!--<ProductSpec :data="popupData.data" :popup-type="popupData.type" page-type="detail" @closePopup="closePopup" @addCart="addCart" @buyNow="buyNow" />-->
    	<specTree :data="popupData.data" :switch85="switch85" :storeId="storeId" :switch203="switch203" :switch7="switch7" :ActivityData="ActivityData" :GradeId="userData.GradeId" :ActivityType="ActivityType" :popup-type="popupData.type" page-type="detail" @closePopup="closePopup" @addCart="addCart" @buyNow="buyNow" />
		</van-popup>
  </div>

</template>

<script>
import productHead from 'components/productDetail/head'
import productIntro from 'components/productDetail/introduction'
import productTag from 'components/productDetail/tag'
import productFreight from 'components/productDetail/freight'
import productOption from 'components/productDetail/option'
import productEvaluate from 'components/productDetail/evaluate'
import shopCart from 'components/shopCart'
//import ProductSpec from 'components/productDetail/spec'
import specTree from 'components/productDetail/specTree'

import { GetInintProductDetailInfo, GetCommentListByProduct, GetUserCarList, AddOrUpdateAmount } from 'api/product'
import { GetBusinessFunction } from 'api/businessSetting'
export default {
  components: {
    productHead,
    productIntro,
    productTag,
    productFreight,
    productOption,
    productEvaluate,
    shopCart,
    specTree
  },
  data() {
    return {
      // 头部数据
      scrollTop: 0,
      tel: '',

      Data: {},
      ProductInfo: {},
      UserAddress: {},

      evaluateData: {},
      carList: [],
      ProductID: 0,

      // sku 商品规格弹窗
      popupData: {
        data: {},
        type: 'sku',
        show: false
      },
      cartRequestList: [],
      commentRequest: {
        page: 1,
        size: 10
      },
			switch203:0, //供应商开关
			switch85:0, // 基础商品单位不可购买
			switch7: 0, // 微商下单不限制库存
			VideoUrl: '',
			ThumbnailUrl410: '',
    }
  },
  created() {
    console.log(this.$route.params.id)
    this.commentRequest.product_id = this.$route.params.id
    this.ProductID = Number(this.$route.params.id)
    this.GetInintProductDetailInfo()
    this.GetCommentListByProduct()
    this.GetUserCarList()
		this.GetBusinessFunction()
  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
		GetBusinessFunction(){
      GetBusinessFunction(203).then(res => {
        if (res) {
          this.switch203 = res.Data[0].Value;
        }
      })
      GetBusinessFunction(85).then(res => {
        if (res) {
          this.switch85 = res.Data[0].Value;
        }
      })
			GetBusinessFunction(7).then(res => {
        if (res) {
          this.switch7 = res.Data[0].Value;
        }
      })
    },
    // 商品、详情切换
    changeDetail(index) {
      console.log(index)
      // 加入锚点
      let height = 0
      switch (index) {
        case 0:
          height = 0
          break
        case 1:
          height = this.$refs.info.offsetHeight - 88
          break
      }
      // 这里需要搞一个滚动过渡动画
      // document.documentElement.scrollTop = height
      this.$utils.animateScrollTop(height)
    },
    clickLeft() {
      this.$utils.back(this.$route.path)
    },

    // 更改收藏状态
    changeFavState(val) {
      this.Data.IsFavorite = val
    },
    showSpec() {
      this.popupData.data = this.ProductInfo
      this.popupData.show = true
    },
    closePopup() {
      console.log('guanbi')
      this.popupData.show = false
    },
    addCart(arr) {
      console.log(arr)
      this.cartRequestList = arr
      if (this.cartRequestList.length <= 0) {
        this.$toast.fail('请选择商品')
        return
      }
      this.AddOrUpdateAmount()
    },
    buyNow(arr) {
      console.log(arr)
      this.cartRequestList = arr
      // this.AddOrUpdateAmount()
    },
    // 调用分享弹窗
    share() {

    },
    changeAddress(address) {
      this.UserAddress = address
    },
    updateCart(bool) {
      if (bool) {
        this.GetUserCarList()
      }
    },

    // 滚动事件触发下拉加载
    onScroll() {
      this.scrollTop = this.$utils.getScrollTop()
    },

    GetInintProductDetailInfo() {
      GetInintProductDetailInfo({ productId: this.$route.params.id, InfoType: 1 }).then(res => {
        if (res) {
          console.log('购物车：' + res)
          this.Data = res.Data
          this.ProductInfo = res.Data.ProductInfo
          this.UserAddress = res.Data.UserAddress
					this.ThumbnailUrl410 = res.Data.ProductInfo.ThumbnailUrl410
          if (res.Data.ProductInfo.ImageUrl) {
            this.Data.imgList = res.Data.ProductInfo.ImageUrl.split(',')
            this.ProductInfo.logo = this.Data.imgList[0]
          }
					if(res.Data.ProductInfo.VideoUrl){
						this.VideoUrl = res.Data.ProductInfo.VideoUrl
					}
          if (res.Data.StoreInfo) {
            this.tel = res.Data.ServiceTel
          }
        }
      })
    },
    GetCommentListByProduct() {
      GetCommentListByProduct(this.commentRequest).then(res => {
        if (res) {
          console.log(res)
          this.evaluateData = res.Data
        }
      })
    },
    // 获取购物车列表
    GetUserCarList() {
      GetUserCarList({ priceType: 1 }).then(res => {
        if (res) {
          this.carList = res.Data
        }
      })
    },
    // 更新购物车
    AddOrUpdateAmount() {
      AddOrUpdateAmount(this.cartRequestList).then(res => {
        if (res) {
          console.log(res)
          this.popupData.show = false
          this.GetUserCarList()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

// 详情
.product-detail{
  background: $colorF;
  padding: 16px 0;
  .product-detail-tle{
    padding: 0 32px ;
    font-size: 30px;
    line-height: 1;
    position: relative;
    &::before{
      content:'';
      position: absolute;
      width: 6px;
      border-radius: 3px;
      height: 30px;
      @include bg-primary;
      top: 0px;
      left: 15px;
    }
  }
}
.product-option{
  background: $colorF;
    padding: 25px 32px;
}
.bottom-popup{
  border-radius: 40px 40px 0 0;
}
</style>
